<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>路径-编辑</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script src="./scripts/iview.min.js"></script>
    <link rel="stylesheet" href="./scripts/iview.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin-bottom: 12px;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        select {
            font-size: 20px;
        }

        .setbox span:nth-child(1) {
            font-weight: bold;
            display: inline-block;
            margin: 5px 0;
        }

        .ivu-tooltip-popper {
            left: 20px !important;
        }

        .ivu-select-selection {
            border-radius: 0;
        }

        .ivu-select-multiple .ivu-tag span:not(.ivu-select-max-tag) {
            margin-top: 0px;
        }

        button {
            width: 200px;
            background: transparent;
            border: none;
            color: white;
            letter-spacing: 18px;
            font-weight: bold;
            font-size: 30px;
            cursor: pointer;
        }

        .ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
            height: 20px;
            line-height: 20px;
            color: black;
            font-family: "宋体";
            font-size: 20px;
            font-weight: normal;
        }

        .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
            height: 20px;
            line-height: 20px;
            font-size: 20px;
        }

        .ivu-tag {
            font-size: 20px;
        }

        .ivu-select-item {
            font-size: 20px !important;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%"  @click="raise = false,reduce = false">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                        <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
                            <div class="defultbtn" :class="{'btnon':creating}" @click="creating = !creating">创建</div>
                            <div class="defultbtn" style="margin-left:20px;" :class="{'btnon':editing}"  @click="editing = !editing">编辑</div>
                            <div class="defultbtn" style="margin-left:20px;" @click.stop=clickraise>抬高</div>
                            <div class="defultbtn" style="margin-left:20px;" @click.stop=clickreduce>降低</div><br/>
                            <hr/>
                            <div class="setbox" style="margin-top:5px">
                                <Tooltip max-width="200" content="平滑过渡：对首末两个相机之间的相机自动进行插值处理，这样可以做到自动进行相机姿态的平滑。操作方法：点击下拉框根据相机编号选择要进行平滑过渡的首末两个相机，再点击设置按钮就可以做到相机姿态的平滑。注意：首个相机的编号务必要小于末个相机的编号">
                                    <button style="width:200px;">平滑过渡</button>
                                </Tooltip><br/>
                                <span>首个相机：</span>                                
                                <Select v-model="previous" style="width:60px">
                                    <Option v-for="item in previousArr" :value="item" :key="item">{{ item }}</Option>
                                </Select>
                                <span>末个相机：</span>
                                <Select v-model="next" style="width:60px">
                                    <Option v-for="item in nextArr" :value="item" :key="item">{{ item }}</Option>
                                </Select>
                                <div class="defultbtn" style="margin-left:20px;" @click="set">设置</div><br/>
                                <hr/>
                                <Tooltip max-width="300" content="沿着路径方向：自动沿路径计算相机的姿态。注意：如果不选择相机，将会修改所有相机的姿态。操作方法：点击下拉框选择相机编号，再点击确定按钮即可。">
                                    <button style="width: 300px;">沿着路径方向</button>
                                </Tooltip><br/>
                                <span>选择目标：</span><Select v-model="selectArr1" multiple style="width:276px; display:inline-block; color: black; background: white;">
                                    <Option v-for="item in previousArr" :value="item" :key="item">{{ item }}</Option>
                                </Select>
                                <div class="defultbtn" style="margin-left:20px;" @click="alongThePath">确定</div><br/>
                                <hr/>
                                <Tooltip max-width="200" content="相机指向：将相机的方向指向目标点所在位置。操作方法：点击目标点按钮来确定目标点所在位置，点击下拉框选择要进行操作的相机，再点击确定按钮即可将选择的相机方向指向目标点。注意：如果不选择相机将会将所有相机指向目标点，如果不选择目标点将会指向默认位置。">
                                    <button>相机指向</button><br/>
                                </Tooltip><br/>
                                <span>选择目标：</span><Select v-model="arr" multiple style="width:170px; display:inline-block; color: black; background: white;">
                                    <Option v-for="item in previousArr" :value="item" :key="item">{{ item }}</Option>
                                </Select>
                                <div class="defultbtn" style="margin-left:10px;" @click="setdirection">目标点</div>
                                <div class="defultbtn" style="margin-left:10px;" @click="ok">确定</div><br/>
                            </div>
                        </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    _pin: undefined,
                    // 是否处于创建状态
                    // 设置为true以后，将进入重新创建的状态；此时可以使用鼠标左键在三维窗口中点击来创建路径的关键点，当点击鼠标右键，则表示创建完成。此时该属性会自动变成false。
                    creating: false,
                    // 是否处于编辑状态
                    // 设置为true以后，将进入重新创建的状态；此时可以使用鼠标左键在三维窗口中选取需要修改路径的关键点，当点击鼠标右键，则表示编辑完成。此时该属性会自动变成false。
                    editing: false,
                    raise: false,
                    reduce: false,
                    previous: 0,
                    next: 0,
                    previousArr: [],
                    nextArr: [],
                    selectArr1: [],
                    arr: [],
                    position: [],
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                // 1.1.2 场景配置
                earth.sceneTree.root = {
                    "expand": true,
                    "title": "预览场景",
                    "children": [{
                        "ref": 'tileset',
                        "czmObject": {
                            "name": '大雁塔',
                            "xbsjType": "Tileset",
                            "url": '../assets/dayanta/tileset.json',
                            "xbsjUseOriginTransform": false,
                            "skipLevelOfDetail": false
                        },
                    }, {
                        "ref": 'path1',
                        "czmObject": {
                            "xbsjType": "Path",
                            "positions": [
                                [
                                    1.901680132420559,
                                    0.5972182908445829,
                                    433.0683171316799
                                ],
                                [
                                    1.9016955279727528,
                                    0.5972181452778111,
                                    423.12350415411714
                                ],
                                [
                                    1.9017145828580002,
                                    0.5972208009081579,
                                    425.4850832912241
                                ],
                                [
                                    1.9017262789547222,
                                    0.5972351096523284,
                                    422.8497499192048
                                ],
                                [
                                    1.901727649590904,
                                    0.5972528175704416,
                                    430.28505722755125
                                ],
                                [
                                    1.9017257110942418,
                                    0.5972725123064561,
                                    424.4079951073853
                                ],
                                [
                                    1.9017036577863207,
                                    0.5972724396334318,
                                    424.7490241854184
                                ],
                                [
                                    1.901686600965538,
                                    0.5972705593917232,
                                    427.02149479702354
                                ],
                                [
                                    1.9016766994617944,
                                    0.5972603070896778,
                                    431.7015124084112
                                ]
                            ],
                            "rotations": [
                                [
                                    0.09013100029970911,
                                    -0.18377735899612802,
                                    0.003054530379764664
                                ],
                                [
                                    6.2774807418185326,
                                    -0.027139787365685564,
                                    0.003118310344536468
                                ],
                                [
                                    5.661660276351502,
                                    -0.021720571300320346,
                                    0.002535544669053813
                                ],
                                [
                                    4.981394998665019,
                                    0.05285693534942659,
                                    0.0008279383261120543
                                ],
                                [
                                    4.8175908508971865,
                                    -0.01246899314535077,
                                    0.0003275578935015844
                                ],
                                [
                                    3.5587596233006114,
                                    -0.02089253969273508,
                                    6.28033382242212
                                ],
                                [
                                    3.1760456928764027,
                                    0.0119204105288373,
                                    6.280067735240507
                                ],
                                [
                                    2.6119489784580585,
                                    0.04429838944262987,
                                    6.280495736703571
                                ],
                                [
                                    1.96205879990623,
                                    0.059989205852726935,
                                    6.28199776080986
                                ]
                            ],
                            "show": true, // 显示路径
                            "loop": false, // 是否为环线                           
                            "showDirection": true, // 显示方向(默认为true)
                            // 是否处于播放状态
                            // 如果属性值为true，则所有'current'开头的相关属性会动态发生变化。 可以通过手动设置为false，来结束播放状态。 当loopPlay属性为false时，playing属性会在路径播放到最后一个关键点的位置时，自动变为false。
                            "playing": false,
                            // 是否循环播放
                            // 如果为false，则playing设置为true时，会从当前位置播放到最后一个关键点，并停止播放，此时playing属性会自动变成false。 若此属性为true时，播放到最后一个关键点以后，将自动重第一个关键点继续播放。
                            "loopPlay": false,
                            "alwaysAlongThePath": true // 始终沿着路径方向运动(默认值为false)
                        }
                    }, {
                        "czmObject": {
                            "name": '默认影像',
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": XE.Obj.Imagery.defaultImageryProviderConfig,
                        },
                    }]
                };

                var tileset = earth.sceneTree.$refs.tileset.czmObject;
                var path1 = earth.sceneTree.$refs.path1.czmObject;
                var pin = new XE.Obj.Pin(earth);

                // 定义一个pin为相机排序
                var ps = path1.positions.map((e, i) => {
                    var pin = new XE.Obj.Pin(earth);
                    pin.position = e;
                    pin.pinBuilder.text = '' + i;
                    return pin;
                })

                var cameraLength = path1.positions.length;
                for (var i = 0; i < cameraLength; i++) {
                    this.previousArr.push(i);
                    this.nextArr.push(i);
                }

                // 设置相机位置
                // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                earth.camera.position = [1.901703273472499, 0.5971739421771012, 965.6307343927805];
                earth.camera.rotation = [1.758593271006248e-13, -0.7854502059287727, 6.283185307179586];

                // 1.1.5 数据绑定
                this._creatingUnbind = XE.MVVM.bind(this, 'creating', path1, 'creating');
                this._editingUnbind = XE.MVVM.bind(this, 'editing', path1, 'editing');

                this._earth = earth;

                // only for Debug
                window.tileset = tileset;
                window.path1 = path1;
                window.earth = earth;
                window.pin = pin;
            },
            methods: {
                // 抬高相机路径，每次加10
                clickraise() {
                    this.raise = true;
                    this.reduce = false;
                    // 同时给所有关键点增加高度
                    path1.addHeight(10);
                },
                // 降低相机路径，每次减10
                clickreduce() {
                    this.reduce = true;
                    this.raise = false;
                    // 同时给所有关键点增加高度
                    path1.addHeight(-10);
                },
                alongThePath() {
                    if (this.selectArr1.length === 0) {
                        // directionAlongThePath(includeIndex)
                        // 自动沿路径计算关键点的姿态
                        // 注意：如果不设置参数，从修改所有关键点的姿态
                        // includeIndex是一个数组，囊括所有需要计算的关键点的索引。
                        path1.directionAlongThePath();
                    } else {
                        // var selectNumArr1 = this.selectArr1.map(Number);
                        path1.directionAlongThePath(this.selectArr1);
                    }
                },
                set() {
                    // directionLerpBetween(first, last)
                    // 根据索引值为first和last的关键点的姿态，对first和last之间的关键点自动进行插值处理。
                    // 注意：first务必小于last
                    path1.directionLerpBetween(this.previous, this.next);
                },
                ok() {
                    this.position = [...pin.position];
                    if (this.arr.length === 0) {
                        // targetTo(target, includeIndex)
                        // 将所有关键点的方向指向target所在位置
                        // target用来表示观察位置，包含三个元素的数组，分别表示经度、纬度、高度
                        // includeIndex索引数组，如果有值，则指只处理includeIndex有的索引，如果无值，则全部处理
                        path1.targetTo(this.position);
                    } else {
                        // var arrnum = this.arr.map(Number);
                        path1.targetTo(this.position, this.arr);
                    }
                },
                setdirection() {
                    pin.creating = true;
                    pin.pinBuilder.text = "目标点";
                    pin.pinBuilder.size = 80;
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._creatingUnbind = this._creatingUnbind && this._creatingUnbind();
                this._editingUnbind = this._editingUnbind && this._editingUnbind();
                this._earth = this._earth && this._earth.destroy();
                this._uw = this._uw && this._uw();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>